<!--
 * @Author: guo-bomin 2974463764@qq.com
 * @Date: 2024-01-19 16:00:14
 * @LastEditors: guo-bomin 2974463764@qq.com
 * @LastEditTime: 2024-01-24 17:29:32
 * @FilePath: \my-vue-app\src\views\test\index.vue
 * @Description: 郭博民16670506200
 * 有问题微信同号询问，急事call我
 * Copyright (c) 2024 by 湖南習羽网络科技有限公司, All Rights Reserved. 
-->
<template>
  <div class="app-container flex-center-center">
    <div id="Map" class="map"></div>
  </div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { getCurrentInstance, ref, reactive } from 'vue';

const map = ref(null); // 地图实例
const geolocation = ref(null); // 定位实例
const position = ref([]); // 坐标
const data = reactive({
  form: {},
  locationInfo: {},
});
const { locationInfo } = toRefs(data);
const { proxy } = getCurrentInstance();

function initMap() {
  AMapLoader.load({
    key: proxy.mapJsKey, // 申请好的Web端开发者Key，首次调用 load 时必填
    //2.0版本太卡了 ，所以使用的1.4.0版本  其插件也有不同  如：ToolBar
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    resizeEnable: true, // 定位到当前位置
    plugins: [
      'AMap.ToolBar', //工具条
      'AMap.Geolocation', //定位
      'AMap.PlaceSearch', // poi搜索
      'AMap.Scale', // 比例尺
    ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map.value = new AMap.Map('Map', {
        viewMode: '3D', //是否为3D地图模式
        zoom: 14, //初始化地图级别
      });
      map.value.addControl(new AMap.ToolBar()); // 工具条
      map.value.addControl(new AMap.Scale()); // 比例尺

      geolocation.value = new AMap.Geolocation({
        //定位
        enableHighAccuracy: true, //是否使用高精度定位，默认:true
        timeout: 5000, //超过10秒后停止定位，默认：无穷大
        maximumAge: 0, //定位结果缓存0毫秒，默认：0
        convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: true, //显示定位按钮，默认：true
        buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
        showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      });
      // map.value.addControl(geolocation.value); //在地图上引入定位插件

      geolocation.value.getCurrentPosition((status, result) => {
        if (status == 'complete') {
          locationInfo.value = result;
          // console.log('位置信息  complete: => ', result);
          // console.log('位置经纬度: => ', result.position);
          position.value = [result.position.lng, result.position.lat];
        } else {
          console.log('位置信息  error: =>', result);
        }
      });
    })
    .catch((e) => {
      console.log(e);
    });
}

initMap();
</script>

<style lang="scss" scoped>
.app-container {
  padding: 30px;
  .map {
    width: 800px;
    height: 400px;
    border: 1px solid #000;
  }
}
</style>
